import * as echarts from '../ec-canvas/echarts';
// 折线图
let chartLine;

function getLineOption() {
  let option = {
    title: {
      text: '每月报修统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '45',
      containLabel: true
    },
    dataZoom: [{
      type: 'slider',
      show: true,
      start: 0,
      end: 100,
      zoomLook: true,
      showDetail: false,
    }, ],
    xAxis: {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
    },
    series: [{
      name: '报修数量',
      data: [],
      type: 'line'
    }]
  };
  return option
}

function initchartLine(canvas, width, height, dpr) {
  chartLine = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chartLine);
  let option = getLineOption();
  chartLine.setOption(option);
  return chartLine;
}
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    oData:{
      type:Object,
      value:null,
      observer: function (newVal, oldVal, changedPath) {
        if (newVal) {
          setTimeout(()=>{
            chartLine.setOption({
              xAxis: {
                data: newVal.xdata
              },
              series: [{
                data: newVal.ydata
              }]
            });
          },500)
        }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: initchartLine, // 3、将数据放入到里面
    }
  },
  attached(){
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})
